<template>
  <!-- 看图说话 -->
  <view class="container">
    <view class="options">
      <u-row customStyle="margin-bottom: 10px">
        <u-col span="6">
          <view style="margin-left: 40rpx;">
            <view class="progress">
              <u-tag :text="(currentQuestion+1)+'/'+(questions.length)" type="warning"></u-tag>
            </view>
            <view class="question">
              <button class="labelButton" type="primary" @click="playMP3(questions[currentQuestion])">
                <text>播放</text><u-icon name="https://www.afbeijing.net/static_resources/assets/sta.png" style="width: 32rpx;"></u-icon>
              </button>
              <!-- <view @click="readQuestion" class="textCn">{{ questions[currentQuestion].questionCn }}</view> -->
            </view>
            <view v-for="(option, index) in questions" :key="index">
              <img :src="option.questionImage" v-if="currentQuestion===index" style="height: 150rpx; width:95%" />
            </view>
          </view>
        </u-col>
        <u-col span="6">
          <view class="radio-layout">
            <u-radio-group
              v-model="radioValue"
              placement="column"
              class="radio-group"
              :iconSize="30"
              :size="40"
              activeColor="#FF8106"
              labelSize="26px"
            >
              <u-radio
                :customStyle="{marginBottom: '8px',background:' #FFF8E8',borderRadius: '18rpx', padding:'20rpx 10rpx'}"
                v-for="(options, indexs) in questions[currentQuestion].options" 
                :key="index"
                :label="options.key"
                :name="indexs"
                @change="checkAnswer(questions[currentQuestion].options[indexs].key,questions[currentQuestion],currentQuestion)"
              >
                <view class="labelFather">
                  <view class="labelSizes"> {{ options.key }}</view> 
                </view>
              </u-radio>
            </u-radio-group>
          </view>
          <view v-if="showResult" class="result">
            <text :class="resultMessageError===true?'errorClass':''">{{ resultMessage }}</text>
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
// import Speech from 'speak-tts'  //引入
import {fiveSelectGame,fiveCompleteGame} from "../../../api/index"
export default {
  data() {
    return {
		matchFlag:false,
      isPlaying:false,//播放暂停
      labelButtonOpen:true,//默认打开
      indexQuetion:0,
      palyIndex:null,
      radioValue:null,
      currentQuestion: 0,
      resultMessageError:false,
      speech:null,
      questions: [],//循环数据
      palyEnd:false,
      showResult: false,
      resultMessage: "",
      crsId:null,
      clsCrsId:null,
      errorNo:null,
      clsId:null,
      innerAudioContext: null // 新增音频实例变量
    };
  },
  mounted() {
    // 初始化调用
    // this.speechInit();
  },
  onLoad(e) {
    this.crsId=e.crsId
    this.clsCrsId =Number(e.id)
    this.clsId=e.clsId
    this.selectGameList()
  },
  methods: {
    // 提交成功
    sumbPic(){
      var jsonData = {
        clsId:this.clsId,
        clsCrsId:this.clsCrsId,
        crsId:this.crsId,
        tryNum:this.errorNo,
		matchFlag:this.matchFlag,
        gameId:Number(this.gameId)-1
      };
      //完成拼图提示
      let _this = this;
      fiveCompleteGame(jsonData).then(response => {
        console.log(response)
        if (response.code === 0) {
          var _this=this
          uni.showModal({
            title: '提示',
            showCancel: false,
            content: '恭喜你回答正确！',
            success: function(res) {
              if (res.confirm) {
                _this.isShow = false;
                _this.nextQuestion()//自动下一个
              }
            }
          });
          // this.imgList=response.data
        }else{
          //	
        }
      })
    },
    //查询翻牌游戏
    selectGameList(){
      // this.clsCrsId=494
      // this.crsId='ag300-cls301-crs001'
      var jsonData = {
        clsCrsId:this.clsCrsId,
        crsId:this.crsId,
        pageNum: 1,
      };
      fiveSelectGame(jsonData).then(response => {
        if (response.code === 0) {
          console.log(response.data)
          this.questions=response.data
        }else{
          // this.nodeIf=false
          uni.$u.toast(response.msg) 
        }
      }).catch(errors => {
        // uni.$u.toast(errors)
      })
    },
    // 播放 MP3 音频
    playMP3(mp3) {
      console.log(mp3)
      if (this.innerAudioContext) {
        this.innerAudioContext.destroy(); // 销毁之前的音频实例
      }
      this.innerAudioContext = uni.createInnerAudioContext();
      this.innerAudioContext.autoplay = true;
      this.innerAudioContext.src = mp3.questionAudio;
      this.innerAudioContext.onPlay(() => {
        console.log('开始播放',this.labelButtonOpen);
        this.labelButtonOpen=false//隐藏图标
      });
      //暂停
      this.innerAudioContext.onPause(() => {
        console.log('暂停');
        // 当音频停止时，隐藏播放中图标
        this.labelButtonOpen=true//隐藏图标
      });
      // 音频停止事件
      this.innerAudioContext.onStop(() => {
        console.log('停止');
        // 当音频停止时，隐藏播放中图标
        this.labelButtonOpen=true//隐藏图标
      });
      this.innerAudioContext.onError((res) => {
        console.log(res.errMsg);
        console.log(res.errCode);
      });
    },
    // 判断是否正确
    checkAnswer(key,item,index) {
      this.indexQuetion=index
      this.gameId=item.gameId
      if (key === this.questions[this.currentQuestion].answerKey) {
        this.resultMessage = "回答正确！";
        this.resultMessageError = false;
		this.matchFlag=true
        this.sumbPic()
      } else {
        this.errorNo++
        this.resultMessageError = true;
        this.resultMessage = "回答错误，正确答案是：" + [this.questions[this.currentQuestion].answerKey];
      }
      this.showResult = true;
    },
    nextQuestion() {
      console.log(this.currentQuestion);
      if((this.currentQuestion+1)=== this.questions.length){
        // wx.showModal({
        //   title: '没有题了',
        //   showCancel: false,
        // });
		setTimeout(function() {
			//跳转积分页
			uni.redirectTo({
				url: '/src/views/pageStudy/common/huodejifen/index?showButton=false'
			});
		}, 100);
		
      }else{
        this.showResult = false;
        this.currentQuestion++;
        this.radioValue=null;
        if (this.currentQuestion >= this.questions.length) {
          this.resultMessage = "全部回答完毕！";
          this.showResult = true;
        }
      }
    },
    readQuestion() {
      wx.showModal({
        title: '英文题目',
        content: this.questions[this.currentQuestion].question_en,
        showCancel: false,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
page{
  overflow: hidden;
}
</style>
<style scoped>
/* ::deep.u-radio{
  padding: 30rpx 10rpx;
} */
.question{
  display: flex;
  justify-content: flex-start;
}
.radio-layout{
  margin-top: 20rpx;
}
.labelFather{
  display:flex;
  width: 100%;
  justify-content: space-between; 
  /* justify-content: space-around; */
}
.labelButton{
  background: #FF8106;
  border-radius: 23rpx;
  width:80rpx;
  height: 30rpx;
  display: flex;
  line-height: 30rpx;
  justify-content:space-between;
  margin-right: 20rpx;
  margin: 0;
}
.labelSizes{
  font-size: 27rpx;
}
.textCn{
  font-size: 16rpx;
  color: #3CAB7E;
  padding-left: 10rpx;
  padding-top: 5rpx;
  font-weight: bold;
}
.container {
  padding: 20px;
}
.progress {
  display: flex;
  font-size: 18px;
  margin-bottom: 20px;
}
.question {
  margin-bottom: 20px;
}
.options {
  display: flex;
  flex-direction: column;
}
.radio-group{
  width: 100%;
}
.radio-label{
  /* border:1px solid #ccc; */
  /* line-height: 100rpx; */
  display: flex;
  margin-top: 20rpx;
  border-radius: 18rpx;
  background: #FFF8E8;
  box-sizing: border-box;
  padding: 20rpx;
  width: 100%;
}
.options  radio{
  width: 70%;
}
.listItem{
  background: #007aff;
  color: #fff;
  line-height: 50rpx;
}
.errorClass{color:red}
.option-button {
  margin: 10px 0;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  /* border-r */
}
.result {
  margin-top: 20px;
}
</style>

<style lang="scss" scoped>
  @import "~@/static/styles/variables.scss";
</style>